import React from 'react';
import {connect} from 'dva';
import {Button, Card, Col, Form, Input, Row, Tabs} from 'antd';
import styles from './index.css';
import Helmet from 'react-helmet';
import configApi from "../../utils/configApi";

const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

// @Form.create()
// export default class Login extends React.Component
const Login = ({
                 loading,
                 dispatch,
                 interceptor,
  login,
                 form: {
                   getFieldDecorator,
                   validateFieldsAndScroll,
                 },
               }) => {

  function handleOk() {
    validateFieldsAndScroll((errors, values) => {
      // console.log("handleOk", errors, values);
      if(!errors) {
        dispatch({ type: 'login/login', payload: values });
      }
    });
  }

  const buildYear = ()=> {
    const date = new Date();
    const year = date.getFullYear();
    return year + " - "+ (year + 2);
  }

  return (
    <div className={styles.loginMain}>
      <Helmet><title>用户登陆-{configApi.appName}</title></Helmet>
      <Row align="top" justify="center" type="flex" className={styles.mainRow}>
        <Col xs={22} sm={16} md={12} lg={10} xl={8}>
          <Card bordered={false} className={styles.loginCard}>
            <h2 className={styles.title}>{configApi.appName}</h2>

            <Form onSubmit={handleOk} className={styles.loginForm}>
              <FormItem>
                {getFieldDecorator('username', {rules:[{ required: true, message: '请输入用户名'}]})(<Input onPressEnter={handleOk} placeholder="用户名"/>)}
              </FormItem>
              <FormItem>
                {getFieldDecorator("password", {rules:[{ required: true, message: '请输入密码'}]})(<Input onPressEnter={handleOk} type="password" placeholder="密码"/>)}
              </FormItem>
              <Row>
                <Button className={styles.loginBtn} type="primary" onClick={handleOk} loading={loading.models.login}>登   陆</Button>
              </Row>
            </Form>
            <Row className={styles.infoRow}>
              &copy; {buildYear()} Created By zsl
            </Row>
          </Card>
        </Col>
      </Row>
    </div>
  );
}

// export default Login;
export default connect(({ loading, interceptor,login }) => ({ loading, interceptor,login }))(Form.create()(Login))
